<template>
	<div :class="$style['layout-right-container']">
		<div :class="$style['page-title']" v-if="breadcrumb.length || $slots['title-operation']">
			<el-breadcrumb :class="$style['right-breadcrumb']" v-if="breadcrumb.length">
				<template :key="index" v-for="(item, index) in breadcrumb">
					<el-breadcrumb-item :to="{ path: item.path }" v-if="item.path">{{ item.label }}</el-breadcrumb-item>
					<el-breadcrumb-item v-else>{{ item.label }}</el-breadcrumb-item>
				</template>
			</el-breadcrumb>

			<div :class="$style['breadcrumb-extra']">
				<slot name="breadcrumb-extra" />
				<div :class="$style['page-title-operation']">
					<slot name="title-operation" />
				</div>
			</div>

		</div>

		<div :class="$style['right-container']">
			<slot name="default" />
		</div>
	</div>
</template>

<script>
import VueTypes from 'vue-types'

export default {
	name: 'LayoutRightContainer',
	props: {
		breadcrumb: VueTypes.array.def([])
	}
}
</script>

<style lang="scss" module>
.layout-right-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.page-title {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: 32px;
	padding-bottom: 10px;
}

.right-breadcrumb {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	height: 100%;
	margin-left: 10px;

	& [class~="el-breadcrumb__item"]:last-child [class~="el-breadcrumb__inner"] {
		font-weight: bold;
	}

	& [class~="el-breadcrumb__inner"][class~="is-link"],
	& [class~="el-breadcrumb__inner"][class~="is-link"]:hover {
		color: #333;
	}
}

.breadcrumb-extra {
	flex: 1 0 0;
	display: flex;
	align-items: center;
	margin-left: 25px;
	line-height: 1;
	font-size: 14px;
	color: #333;

	&>[strong] {
		font-weight: 600;
	}
}

.page-title-operation {
	position: absolute;
	right: 0;
	top: -10px;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 42px;
}

.right-container {
	flex: 1 0 0;
	width: 100%;
	height: 0;
}
</style>